<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #buttonbox{
            width: 100px;
            height: 400px;
            display: flex;
            flex-direction: column;
            background-color: aqua;
            justify-content: space-around;
        }
        #buttonbox > button{
            height: 30px;
        }
        #buttonbox > button:active{
            background-color: chartreuse;
        }
        #box1{
            position: relative;
            left: 120px;
            height: 200px;
            background-color: brown;
            top: -300px;
            width: 200px;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <div id="buttonbox">
        <button>显示show</button>
        <button>隐藏hidden</button>
        <button>显示/隐藏切换</button>
        <button>浅入fadeIN</button>
        <button>浅出fadeOut</button>
        <button>淡化到</button>
        <button>浅入/浅出切换</button>
    </div>
    <div id="box1">
        Hello world!
    </div>
</body>
<script>
    $box1=$("#box1");
    // show 、 hide toggle 的第一个参数使事件单位为毫秒
    //  第二个参数为回调函数(动画执行完之后的执行的函数)
    $("#buttonbox > button:nth-child(1)").click(
        function(){
            $box1.css({"color":"white"})
            //设置元素的显示
            $box1.show(1000);
        }
    )
    $("#buttonbox > button:nth-child(2)").click(
        function(){
            // 设置元素的隐藏
            $box1.hide(1000,function(){
                alert("隐藏动画执行完成");
            });
        }
    )
    $("#buttonbox > button:nth-child(3)").click(
        function(){
            // 元素的隐藏与显示之间相互切换
            $box1.toggle();
        }
    )
    $("#buttonbox > button:nth-child(4)").click(
        function(){
            $box1.fadeIn(1000,function(){
                alert("慢慢的显示完成");
            });
        }
    )
    $("#buttonbox > button:nth-child(5)").click(
        function(){
            $box1.fadeOut(1000);
        }
    )
    $("#buttonbox > button:nth-child(6)").click(function(){
        // 第二个参数为透明度
        $box1.fadeTo(1000,0.2)
    })
    $("#buttonbox > button:nth-child(7)").click(
        function(){
            $box1.fadeToggle(1000);
        }
    )
</script>
</html>